<template>
  <view class="tab-bar">
    <view 
      class="tab-item" 
      :class="{ 'active': activeTab === 'home' }"
      @click="onTabChange('home')"
    >
      <uni-icons :type="'home'" :size="24" :color="activeTab === 'home' ? '#00ffff' : '#ffffff'"></uni-icons>
      <text class="tab-text">首页</text>
    </view>
    
    <view 
      class="tab-item" 
      :class="{ 'active': activeTab === 'diagnostic' }"
      @click="onTabChange('diagnostic')"
    >
      <uni-icons :type="'list'" :size="24" :color="activeTab === 'diagnostic' ? '#00ffff' : '#ffffff'"></uni-icons>
      <text class="tab-text">诊断记录</text>
    </view>
    
    <view 
      class="tab-item" 
      :class="{ 'active': activeTab === 'support' }"
      @click="onTabChange('support')"
    >
      <uni-icons :type="'help'" :size="24" :color="activeTab === 'support' ? '#00ffff' : '#ffffff'"></uni-icons>
      <text class="tab-text">服务支持</text>
    </view>
    
    <view 
      class="tab-item" 
      :class="{ 'active': activeTab === 'profile' }"
      @click="onTabChange('profile')"
    >
      <uni-icons :type="'person'" :size="24" :color="activeTab === 'profile' ? '#00ffff' : '#ffffff'"></uni-icons>
      <text class="tab-text">个人中心</text>
    </view>
  </view>
</template>

<script setup>
// 定义props
const props = defineProps({
  activeTab: {
    type: String,
    default: 'home'
  }
});

// 定义事件
const emit = defineEmits(['change']);

// 切换标签页方法
const onTabChange = (tab) => {
  if (tab !== props.activeTab) {
    emit('change', tab);
  }
};
</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid rgba(0, 255, 255, 0.3);
  z-index: 999;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
}

.tab-text {
  font-size: 12px;
  color: #ffffff;
  margin-top: 4px;
}

.tab-item.active {
  background: linear-gradient(to top, rgba(0, 255, 255, 0.2), transparent);
}

.tab-item.active .tab-text {
  color: #00ffff;
}
</style>